Building a web application with Flutter |
您所在的位置:网站首页 › flutter client › Building a web application with Flutter |
description
bug_report
Building a web application with Flutter
Contents
Requirements
Create a new project with web support
Set up
Create and run
IDE
Command line
Build
Add web support to an existing app
This page covers the following steps for getting started with web support: Configure the flutter tool for web support. Create a new project with web support. Run a new project with web support. Build an app with web support. Add web support to an existing project. RequirementsTo create a Flutter app with web support, you need the following software: Flutter SDK. See the Flutter SDK installation instructions. Chrome; debugging a web app requires the Chrome browser. Optional: An IDE that supports Flutter. You can install Visual Studio Code, Android Studio, IntelliJ IDEA. Also install the Flutter and Dart plugins to enable language support and tools for refactoring, running, debugging, and reloading your web app within an editor. See setting up an editor for more details.For more information, see the web FAQ. Create a new project with web supportYou can use the following steps to create a new project with web support. Set upRun the following commands to use the latest version of the Flutter SDK: $ flutter channel stable $ flutter upgradereport_problem Warning: Running flutter channel stable replaces your current version of Flutter with the stable version and can take time if your connection is slow. After this, running flutter upgrade upgrades your install to the latest stable. Returning to another channel (beta or master) requires calling flutter channel explicitly. If Chrome is installed, the flutter devices command outputs a Chrome device that opens the Chrome browser with your app running, and a Web Server that provides the URL serving the app. $ flutter devices 1 connected device: Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150In your IDE, you should see Chrome (web) in the device pulldown. Create and runCreating a new project with web support is no different than creating a new Flutter project for other platforms. IDECreate a new app in your IDE and it automatically creates iOS, Android, desktop, and web versions of your app. From the device pulldown, select Chrome (web) and run your app to see it launch in Chrome. Command lineTo create a new app that includes web support (in addition to mobile support), run the following commands, substituting my_app with the name of your project: $ flutter create my_app $ cd my_appTo serve your app from localhost in Chrome, enter the following from the top of the package: $ flutter run -d chromeinfo Note: If there aren’t any other connected devices, the -d chrome is optional. The flutter run command launches the application using the development compiler in a Chrome browser. report_problem Warning: Hot reload is not supported in a web browser Currently, Flutter supports hot restart, but not hot reload in a web browser. BuildRun the following command to generate a release build: $ flutter build webA release build uses dart2js (instead of the development compiler) to produce a single JavaScript file main.dart.js. You can create a release build using release mode (flutter run --release) or by using flutter build web. This populates a build/web directory with built files, including an assets directory, which need to be served together. You can also include --web-renderer html or --web-renderer canvaskit to select between the HTML or CanvasKit renderers, respectively. For more information, see Web renderers. For more information, see Build and release a web app. Add web support to an existing appTo add web support to an existing project created using a previous version of Flutter, run the following command from your project’s top-level directory: $ flutter create --platforms web . |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |